<template>
  <div class="app">
    <h1>{{msg}}，学生姓名是：{{studentName}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法：使用@或v-on） -->
    <Student v-on:chenjt="getStudentName" @demo="m1"/>
    <!-- <Student @chenjt="getStudentName"/> -->
     <!-- <Student @chenjt.once="getStudentName"/> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <Student ref="student" @click.native="show"/>
  </div>
</template>

<script>
    // 引入组件
    import Student from './components/Student'
    import School from './components/School'

    export default {
        name: 'App',
        components: {
          Student,
          School
        },
        data(){
          return{
            msg: 'hello',
            studentName: ''

          }
        },
        methods: {
          getSchoolName(name){
            console.log('App收到了学校名：',name);
          },
          getStudentName(name,...params){
            console.log('App收到了学生名：',name,params);
            this.studentName = name;
          },
          m1(){
            console.log('demo事件被触发了');
          }
      },
      mounted(){
        setTimeout(()=>{
          this.$refs.student.$on('chenjt',this.getStudentName) // 绑定自定义事件
          /* this.$refs.student.$on('chenjt',function(name,...params){
            console.log('App收到了学生名：',name,params);
            console.log(this); // 这里的this是Student实例对象（普通函数写法）
          }) */
          /* this.$refs.student.$on('chenjt',(name,...params)=>{
            console.log('App收到了学生名：',name,params);
            // 这里的this是App实例对象（箭头函数写法）
            // 箭头函数没有自己的this，就会往外找，就找到了mounted()的this
            console.log(this); 
          }) */
          // this.$refs.student.$once('chenjt',this.getStudentName) // 绑定自定义事件（一次性）
        },3000)
      }
        
    }
</script>

<style scoped>
   /*
   全局的样式是不需要加scoped
   全局共享
   */
   .app{
     background-color: gray;
     padding: 5px;
   }
</style>